<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" width="70%" :before-close="dialogClick"
			@open="initData">
			<!-- <div @click="print">导出</div> -->

			<div class="dialogBox" v-loading="loadings" element-loading-text="拼命导出中"
				element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
				<v-OutPdf @exportPdf="initPdfData" @exportWord="exportWordTpl"></v-OutPdf>
				<!-- <v-OutWord @exportPdf="exportWordTpl"></v-OutWord> -->
				<span ref="dialogBase">
					<div class="box" ref="box">

						<!-- <v-PDFCover></v-PDFCover> -->

						<div class="menu" ref="menu">
							<header style="display:grid;justify-content:center;align-content:center">
								<p style="font-size:30px">目&nbsp;&nbsp;&nbsp;录</p>
							</header>
							<main style="width:80%;display:grid;justify-items:center">
								<div style="width:70%;">
									<span
										style="display:grid;margin-bottom:10px;font-weight: 600;font-size: 18px;">oracle数据库智能运行报告</span>
								</div>

								<div style="width:70%;">
									<a href="#one-jczj">
										<span
											style="font-size: 16px;font-weight:600">&nbsp;&nbsp;&nbsp;&nbsp;一.检查总结</span>
									</a>
									<div style="display:grid;padding-left:32px">
										<a href="#one-gy"> <span>1.概要</span></a>
										<a href="#one-ztgk"><span>2.总体概况</span></a>
										<!-- <a href="#one-yhjy">
											<span>3.优化建议</span></a
										> -->
									</div>
								</div>

								<div style="width:70%;">
									<a href="#two-js">
										<span
											style="font-size: 16px;font-weight:600">&nbsp;&nbsp;&nbsp;&nbsp;二．介绍</span>
									</a>
									<div style="display:grid;padding-left:32px">
										<a href="#two-mb">
											<span>1.目标</span>
										</a>
										<a href="#two-jcff">
											<span>2.检查方法</span></a>
										<a href="#two-jcfw">
											<span>3.检查范围</span>
										</a>
									</div>
								</div>

								<div style="width:70%;">
									<a href="#three-pzfx">
										<span
											style="font-size: 16px;font-weight:600">&nbsp;&nbsp;&nbsp;&nbsp;三．数据库配置分析</span>
									</a>
									<div style="display:grid;padding-left:32px">
										<a href="#three-yjpz">
											<span>1.硬件配置</span>
										</a>
										<a href="#three-rjpz">
											<span>2.软件配置</span>
										</a>
										<a href="#three-sjkcs">
											<span>3.数据库参数</span>
										</a>
										<a href="#three-kzwj">
											<span>4.控制文件</span>
										</a>
										<!-- <a href="#three-lsbkj">
											<span>5.临时表空间</span></a
										> -->
										<a href="#three-bkjgl">
											<span>5.表空间管理</span></a>
										<!-- <a href="#three-hgd">
											<span>7.回滚段</span></a
										> -->
										<a href="#three-wxdx">
											<span>6.无效对象，约束和trigger</span></a>
										<a href="#three-sjkrz">
											<span>7.数据库日志ALTER LOG分析</span></a>
									</div>
								</div>

								<div style="width:70%;">
									<a href="#four-xnfx">
										<span
											style="font-size: 16px;font-weight:600">&nbsp;&nbsp;&nbsp;&nbsp;四．数据库性能分析</span></a>
									<div style="display:grid;padding-left:32px">
										<a href="#four-sjk">
											<span>1.数据库实例性能命中率</span></a>

										<a href="#four-ddsj">
											<span>2.等待事件(Top Wait Events)</span></a>
									</div>
								</div>
							</main>
						</div>

						<div class="info-box" style="display:grid;justify-items: center;margin-top:10px ;">
							<div class="tip1" ref="tip1" style="width:80%;">
								<header style="display:grid;grid-template-rows: 30px 5px ;">
									<div style="" id="one-jczj">
										<span style="
									background: #363636;height:100%;
									font-size:18px;
									font-weight:500;
									padding:8px 8px;
									color: #FFFAFA;
									border-top-left-radius: 5px;
									border-top-right-radius: 5px;
									">一.检查总结</span>
									</div>
									<div style="background:#363636;"></div>
								</header>
								<div id="one-gy" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										1.概要
									</p>
									<p style="text-indent: 2em;">
										此次巡检主要针对oracle数据库进行一次全面的健康检查，包括数据库配置、数据库性能等各项内容，并依照此次检查结果，提出相应的优化措施。
									</p>
								</div>
								<div id="one-ztgk" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										2.总体概况
									</p>
									<p style="text-indent: 2em;margin-bottom:10px ;">
										以下是本次检查的总结
									</p>
									<div style="">
										<table border="1" style="border-collapse:collapse;width:100%">
											<tr>
												<th style="width:30%;background: #9BBB59">
													检查方面
												</th>
												<th style="width:70%;background: #9BBB59">
													评价/发现情况
												</th>
											</tr>

											<tr>
												<th>数据库配置与性能</th>
												<th>{{dialogInfoData.firstItem.Overview['tablespace not enough']}}
													{{dialogInfoData.firstItem.Overview['Invalid object']}}</th>
											</tr>
										</table>
									</div>
								</div>
							</div>

							<div class="tip2" ref="tip2" style="width:80%;">
								<header style="display:grid;grid-template-rows: 30px 5px ;">
									<div id="two-js" style="">
										<span style="
									background: #363636;height:100%;
									font-size:18px;
									font-weight:500;
									padding:8px 8px;
									color: #FFFAFA;
									border-top-left-radius: 5px;
									border-top-right-radius: 5px;
									">二．介绍</span>
									</div>
									<div style="background:#363636;"></div>
								</header>
								<div id="two-mb" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										1.目标
									</p>
									<p style="text-indent: 2em;">
										数据库健康检查是用来：
									</p>
									<ul style="list-style: none;margin-left:45px ;">
										<li type="i" style="font-size:12px">
											评价数据库当前的性能情况
										</li>
										<li type="i" style="font-size:12px">
											分析数据库应用瓶颈和资源竞争情况
										</li>
										<li type="i" style="font-size:12px">
											指出存在的问题，提出解决建议
										</li>
									</ul>
								</div>
								<div id="two-jcff" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										2.检查方法
									</p>
									<p style="text-indent: 2em;margin-bottom:10px ;">
										本次数据库性能检查的工具是：
									</p>
									<p style="margin-left:45px ;">
										<span class="width:5px;height:5px;background: #b5b5b5;">&bull;</span>
										IT智能管理系统。
									</p>
									<p style="margin-left:50px ;">
										上述输出结果为建议提供依据。
									</p>
								</div>

								<div id="two-jcfw" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										3.检查范围
									</p>
									<p style="text-indent: 2em;margin-bottom:10px ;">
										本报告提供的检查和建议主要针对以下方面：
									</p>
									<p style="margin-left:50px">1.数据库配置</p>
									<p style="margin-left:50px">2.数据库性能</p>
									<p style="margin-left:30px">
										本报告的提供的检查和建议不涉及：
									</p>
									<ul style="margin-left:50px">
										<li type="i">具体的性能调整</li>
										<li type="i">应用程序的具体细节</li>
									</ul>
									<p style="text-indent: 2em;">
										以下提请注意：本次检查仅历时半天。所以在具体的性能方面仅做相应的建议。如需在数据库性能方面进行进一步的调整，请继续选择数据库性能调整。
									</p>
								</div>
							</div>

							<div class="tip3" ref="tip3" style="width:80%;">
								<header style="display:grid;grid-template-rows: 30px 5px ;">
									<div style="" id="three-pzfx">
										<span style="
									background: #363636;height:100%;
									font-size:18px;
									font-weight:500;
									padding:8px 8px;
									color: #FFFAFA;
									border-top-left-radius: 5px;
									border-top-right-radius: 5px;
									">三．数据库配置分析</span>
									</div>
									<div style="background:#363636;"></div>
								</header>
								<div id="three-yjpz" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										1.硬件配置
									</p>
									<table border="1" style="border-collapse:collapse;width:100%">
										<tr>
											<th style="width:30%;background: #9BBB59">
												name
											</th>
											<th style="width:70%;background: #9BBB59">
												value
											</th>
										</tr>
										<tr>
											<th style="display:grid">主机名</th>
											<th>{{dialogInfoData.thirdItem.Software['Hostname']||'无'}}</th>
										</tr>
										<tr>
											<th>ip</th>
											<th>{{dialogInfoData.thirdItem.Software['ip']||'无'}}</th>
										</tr>
										<tr>
											<th>操作系统</th>
											<th>{{dialogInfoData.thirdItem.Software['OStype']||'无'}}</th>
										</tr>
										<tr>
											<th>内存</th>
											<th>{{dialogInfoData.thirdItem.Software['Memory']||'无'}}</th>
										</tr>
										<tr>
											<th>cpu</th>
											<th>{{dialogInfoData.thirdItem.Software['Cpu']||'无'}}</th>
										</tr>
										<tr>
											<th>ORACLE模式</th>
											<th>{{dialogInfoData.thirdItem.Software['RAC pattern']||'无'}}</th>
										</tr>
									</table>
								</div>

								<div id="three-rjpz" style="margin:20px">
									<!-- {{ dialogInfoData.thirdItem.Hardware }} -->
									<p style="font-size:16px;font-weight: 600;">
										2.软件配置
									</p>
									<table border="1" style="border-collapse:collapse;width:100%">
										<tr>
											<th style="width:30%;background: #9BBB59">
												实例名
											</th>
											<th style="width:70%;background: #9BBB59">
												{{dialogInfoData.thirdItem.Hardware?dialogInfoData.thirdItem.Hardware['Instance name']:'无'}}
											</th>
										</tr>
										<tr>
											<th style="display:grid">
												数据库版本
											</th>
											<th>{{dialogInfoData.thirdItem.Hardware['Dbtype']||'无'}}</th>
										</tr>
										<tr>
											<th>SGA size</th>
											<th>{{dialogInfoData.thirdItem.Hardware['SGA size']||'无'}}</th>
										</tr>
										<tr>
											<th>PGA size</th>
											<th>{{dialogInfoData.thirdItem.Hardware['PGA size']||'无'}}</th>
										</tr>
										<tr>
											<th>表空间个数</th>
											<th> {{dialogInfoData.thirdItem.Hardware['tablespace count']||'无'}}</th>
										</tr>
										<tr>
											<th>数据文件个数</th>
											<th>无</th>
										</tr>
										<tr>
											<th>控制文件个数</th>
											<th>无</th>
										</tr>
										<tr>
											<th>归档方式</th>
											<th>{{dialogInfoData.thirdItem.Hardware['ARCH']||'无'}}</th>
										</tr>
									</table>

									<p>
										结论：数据库为非归档模式，存在安全隐患/（正常）
									</p>
								</div>

								<div id="three-sjkcs" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										3.数据库参数
									</p>
									<table border="1" style="border-collapse:collapse;width:100%"
										v-if="dialogInfoData.thirdItem.dataBaseParam">
										<tr>
											<th style="width:30%;background: #9BBB59">
												Parameter Name
											</th>
											<th style="width:70%;background: #9BBB59">
												Begin value
											</th>
										</tr>

										<tr v-for="(value,key) in dialogInfoData.thirdItem.dataBaseParam" :key="key">
											<th>{{key}}</th>
											<th>
												{{value}}
											</th>
										</tr>
									</table>
									<p v-else style="color:#EE0000;foont-weight:600">暂无数据</p>
								</div>
								<div id="three-kzwj" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										4.控制文件
									</p>
									<table border="1" style="border-collapse:collapse;width:100%"
										v-if="dialogInfoData.thirdItem.ControlFile">
										<tr>
											<th style="width:30%;background: #9BBB59">
												name
											</th>
											<th style="width:40%;background: #9BBB59">
												控制管理包
											</th>
											<th style="width:30%;background: #9BBB59">
												文件记录维护时间
											</th>
										</tr>
										<tr>
											<th style="display:grid;">

												{{dialogInfoData.thirdItem.ControlFile.control_files}}
											</th>
											<th>{{dialogInfoData.thirdItem.ControlFile.control_management_pack_access}}
											</th>
											<th>{{dialogInfoData.thirdItem.ControlFile.control_file_record_keep_time}}
											</th>
										</tr>

									</table>
									<p v-else style="color:#EE0000;foont-weight:600">暂无数据</p>

								</div>
								<!-- <div id="three-lsbkj" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										5.临时表空间
									</p>
									<p style="text-indent: 2em;">
										临时表空间用于存放临时段。为了维护数据库的性能，临时表空间的维护方法有别于其他一般表空间。缺省情况下，所有表空间都创建为PERMANENT。所以在创建临时段时，需要保证表空间类型为TEMPORARY。由于这些表空间中的排序段不被清除，所以减少了空间事务争夺，同时减少了SMON对于CPU的使用率
									</p>
									<p style="text-indent: 2em;">
										以下是数据库临时表空间的情况
									</p>
									<table
										border="1"
										style="border-collapse:collapse;width:100%"
									>
										<tr>
											<th
												style="width:14%;background: #9BBB59"
											>
												Status
											</th>
											<th
												style="width:14%;background: #9BBB59"
											>
												name
											</th>
											<th
												style="width:14%;background: #9BBB59"
											>
												Size (GB)
											</th>
											<th
												style="width:14%;background: #9BBB59"
											>
												Minimum Extents
											</th>
											<th
												style="width:14%;background: #9BBB59"
											>
												Maximum Extents
											</th>
											<th
												style="width:14%;background: #9BBB59"
											>
												Minimum Extent Length
											</th>
											<th
												style="width:14%;background: #9BBB59"
											>
												Increase (%)
											</th>
										</tr>
										<tr>
											<th>ONLINE</th>
											<th>TEMP_DATA</th>
											<th>30</th>
											<th>1</th>
											<th>Null value</th>
											<th>1,048,576</th>
											<th>0</th>
										</tr>
									</table>
								</div> -->
								<div id="three-bkjgl" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										5.表空间管理
									</p>

									<div v-if="dialogInfoData.thirdItem.TableSpace">
										<table border="1" style="border-collapse:collapse;width:100%">
											<!-- <tr>
											<th
												style="width:25%;background: #9BBB59"
											>
												表空间名
											</th>
											<th
												style="width:25%;background: #9BBB59"
											>
												总容量（G）
											</th>
											<th
												style="width:25%;background: #9BBB59"
											>
												剩余空间（G）
											</th>
											<th
												style="width:25%;background: #9BBB59"
											>
												使用率%
											</th>
										</tr>
										<tr>
											<th>HIS_DATA</th>
											<th>728.52</th>
											<th>88.96</th>
											<th>87.79</th>
										</tr>
										<tr>
											<th>SYSAUX</th>
											<th>728.52</th>
											<th>88.96</th>
											<th>87.79</th>
										</tr> -->
											<tr>
												<th style="width:25%;background: #9BBB59">表空间名称</th>
												<th style="width:25%;background: #9BBB59">使用率%</th>
											</tr>
											<!-- <tr v-for="i in dialogInfoData.thirdItem.TableSpace.length " :key="i">
											<th>{{dialogInfoData.thirdItem.tableSpaces.keyItem[i]}}</th>
											<th>1</th>
										</tr> -->
											<tr v-for="(item,key) in dialogInfoData.thirdItem.TableSpace" :key="key">
												<th>{{key}}</th>
												<th>{{item}}%</th>
											</tr>

										</table>
										<div style="text-indent: 2em;">
											结论：HIS_DATA
											表空间使用率超过85%，建议扩容。
										</div>
									</div>

									<p v-else style="color:#EE0000;foont-weight:600">暂无数据</p>


								</div>
								<!-- <div id="three-hgd" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										7.回滚段
									</p>
									<p style="text-indent: 2em;">
										回滚段能够用来保证读一致性，回滚事务以及恢复数据库。以下数据库中回滚段的使用情况：
									</p>
									<table
										border="1"
										style="border-collapse:collapse;width:100%"
									>
										<tr>
											<th
												style="width:16%;background: #9BBB59"
											>
												Status
											</th>
											<th
												style="width:16%;background: #9BBB59"
											>
												Name
											</th>
											<th
												style="width:16%;background: #9BBB59"
											>
												Size (GB)
											</th>
											<th
												style="width:16%;background: #9BBB59"
											>
												FREE(GB)
											</th>
											<th
												style="width:16%;background: #9BBB59"
											>
												USED(GB)
											</th>
											<th
												style="width:16%;background: #9BBB59"
											>
												USED_PERCENT
											</th>
										</tr>
										<tr>
											<th>HIS_DATA</th>
											<th>728.52</th>
											<th>88.96</th>
											<th>87.79</th>
											<th>88.96</th>
											<th>87.79</th>
										</tr>
									</table>

									<p style="text-indent: 2em;">
										结论：回滚段使用率较高，默认UNDO表空间为UNDOTBS1，建议扩容。
									</p>
								</div> -->
								<div id="three-wxdx" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										6.无效对象，约束和trigger
									</p>
									<p style="text-indent: 2em;">
										在数据库中，会存在一些无效的对象，导致这种现象的发生原因很多，其中最常见的就是数据库升级(例如修改了表的结构)，迁移而引起。
									</p>

									<p style="text-indent: 2em;margin-top:10px ;font-weight:600">
										禁用的触发器
									</p>

									<table border="1" style="border-collapse:collapse;width:100%"
										v-if="dialogInfoData.thirdItem.InvalidObject">
										<tr>

											<th style="width:25%;background: #9BBB59">
												所有者
											</th>
											<th style="width:25%;background: #9BBB59">
												状态
											</th>
											<th style="width:25%;background: #9BBB59">
												表名
											</th>
											<th style="width:25%;background: #9BBB59">
												触发器名
											</th>
										</tr>

										<tr v-for="item in dialogInfoData.thirdItem.InvalidObject.Disabledtriggers"
											:key="item.ower">
											<th style="width:25%">{{item.owner}}</th>
											<th style="width:25%">{{item.status}}</th>
											<th style="width:25%">{{item.tableName}}</th>
											<th style="width:25%">{{item.triggersName}}</th>
										</tr>


									</table>
									<!-- <p v-else style="color:#EE0000;foont-weight:600">暂无数据</p> -->

									<p style="text-indent: 2em;margin-top:10px ;font-weight:600">
										无效约束
									</p>
									<table border="1" style="border-collapse:collapse;width:100%"
										v-if="dialogInfoData.thirdItem.InvalidObject['Invalidconstraints']">
										<tr>

											<th style="width:16%;background: #9BBB59">
												所有者
											</th>
											<th style="width:16%;background: #9BBB59">
												约束名
											</th>
											<th style="width:16%;background: #9BBB59">
												约束类型
											</th>
											<th style="width:16%;background: #9BBB59">
												改变时间
											</th>
											<th style="width:16%;background: #9BBB59">
												状态
											</th>
											<th style="width:16%;background: #9BBB59">
												表名
											</th>
										</tr>

										<tr v-for="item in dialogInfoData.thirdItem.InvalidObject.Invalidconstraints"
											:key="item.ower">
											<th style="width:16%">{{item.owner}}</th>
											<th style="width:16%">{{item.constraintName}}</th>
											<th style="width:16%">{{item.constraintType}}</th>
											<th style="width:16%">{{item.lastChange}}</th>
											<th style="width:16%">{{item.status}}</th>
											<th style="width:16%">{{item.tableName}}</th>
										</tr>


									</table>
									<p v-else style="color:#EE0000;foont-weight:600">暂无数据</p>


									<p style="text-indent: 2em;margin-top:10px ;font-weight:600">
										无效对象
									</p>

									<div v-if="dialogInfoData.thirdItem.InvalidObject['Invalidobject']">
										<table border="1" style="border-collapse:collapse;width:100%">
											<tr>

												<th style="width:20%;background: #9BBB59">
													所有者
												</th>
												<th style="width:20%;background: #9BBB59">
													创建时间
												</th>
												<th style="width:20%;background: #9BBB59">
													对象名
												</th>
												<th style="width:20%;background: #9BBB59">
													对象类型
												</th>
												<th style="width:20%;background: #9BBB59">
													状态
												</th>

											</tr>

											<tr v-for="item in dialogInfoData.thirdItem.InvalidObject.Invalidobject"
												:key="item.ower">
												<th style="width:20%">{{item.owner}}</th>
												<th style="width:20%">{{item.created}}</th>
												<th style="width:20%">{{item.objectName}}</th>
												<th style="width:20%">{{item.objectType}}</th>
												<th style="width:20%">{{item.status}}</th>

											</tr>


										</table>
										<p>结论：没有无效对象。</p>
									</div>
									<p v-else style="color:#EE0000;foont-weight:600">暂无数据</p>



								</div>
								<div id="three-sjkrz" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										7.数据库日志ALTER LOG分析
									</p>

									<p style="text-indent: 2em;">
									<table border="1" style="border-collapse:collapse;width:100%">
										<tr>

											<th style="width:50%;background: #9BBB59">
												记录时间
											</th>
											<th style="width:50%;background: #9BBB59">
												结果
											</th>
										</tr>

										<tr v-for="(item,index) in dialogInfoData.thirdItem.ALTERLOG" :key="index">
											<th style="width:50%;">{{item.recordtime}}</th>
											<th style="width:50%;">{{item.result==null?'无':item.result}}</th>
										</tr>


									</table>
									结论：检查alter日志，数据库近期无报错。
									</p>
								</div>
							</div>

							<div class="tip4" ref="tip4" style="width:80%;">
								<header style="display:grid;grid-template-rows: 30px 5px ;">
									<div style="" id="four-xnfx">
										<span style="
									background: #363636;height:100%;
									font-size:18px;
									font-weight:500;
									padding:8px 8px;
									color: #FFFAFA;
									border-top-left-radius: 5px;
									border-top-right-radius: 5px;
									">四．数据库性能分析</span>
									</div>
									<div style="background:#363636;"></div>
								</header>
								<div id="four-sjk" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										1.数据库实例性能命中率
									</p>
									<p style="text-indent: 2em;">
										以下列出的是数据库实例性能的各项的命中率，它们的最佳值是100%
									</p>
									<table border="1" style="border-collapse:collapse;width:100%">
										<tr>
											<th style="width:25%;background: #9BBB59">
												Buffer Nowait %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.BufferNowait}}%
											</th>
											<th style="width:25%;background: #9BBB59">
												Redo NoWait %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.redonowait}}%
											</th>
										</tr>
										<tr>
											<th style="width:25%;background: #9BBB59">
												Buffer Hit %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.BufferHit}}%
											</th>
											<th style="width:25%;background: #9BBB59">
												In-memory Sort %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.memorysort}}%
											</th>
										</tr>
										<tr>
											<th style="width:25%;background: #9BBB59">
												Library Hit %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.libraryHit}}%
											</th>
											<th style="width:25%;background: #9BBB59">
												Soft Parse %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.SoftParse}}%
											</th>
										</tr>
										<tr>
											<th style="width:25%;background: #9BBB59">
												Execute to Parse %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.executetoparse}}%
											</th>
											<th style="width:25%;background: #9BBB59">
												Latch Hit %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.latchHit}}%
											</th>
										</tr>
										<tr>
											<th style="width:25%;background: #9BBB59">
												Parse CPU to Parse Elapsd %:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.parsecputoparseelapsed}}%
											</th>
											<th style="width:25%;background: #9BBB59">
												Non-Parse CPU:
											</th>
											<th style="width:25%;">
												{{dialogInfoData.fourthItem.hitRate.nonparsecpu}}%
											</th>
										</tr>
									</table>

									<p style="text-indent: 2em;">
										结论：数据库命中率基本正常。
									</p>
								</div>
								<div id="four-ddsj" style="margin:20px">
									<p style="font-size:16px;font-weight: 600;">
										2.等待事件(Top Wait Events)
									</p>

									<p style="text-indent: 2em;">
										以下列出的数据库主要的等待事件
									</p>
									<table border="1" style="border-collapse:collapse;width:100%">
										<tr>
											<th style="width:16%;background: #9BBB59">
												Event
											</th>
											<th style="width:16%;background: #9BBB59">
												Waits
											</th>

											<th style="width:16%;background: #9BBB59">
												Wait Class
											</th>
											<th style="width:16%;background: #9BBB59">
												Time(s)
											</th>
											<th style="width:16%;background: #9BBB59">
												Avg Wait(ms)
											</th>
											<th style="width:16%;background: #9BBB59">
												Total Call Time
											</th>

										</tr>

										<tr v-for="item in dialogInfoData.fourthItem.baseEvent" :key="item.event">
											<th>{{item.eventName}}</th>
											<th>{{item. waits}}</th>
											<th>{{item.waitClass}}</th>
											<th>{{item. waitTimeSec}}</th>
											<th>{{item.avgWaittimeMs}}</th>
											<th>{{item.pctdbtime }}</th>

										</tr>
									</table>

									<p style="text-indent: 2em;">
										结论：数据库存在应用锁情况，需要结合应用进行排查。
									</p>
								</div>
							</div>
						</div>
					</div>
				</span>


				<!-- html to pdf -->
				<!-- <v-OutPdf
					@htmlData="initPdfData"
					:htmlData="dialogData"
				></v-OutPdf> -->
			</div>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogClick">取 消</el-button> -->
				<el-button type="primary" @click="dialogClick">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import bus from "common/bus.js";
	import vOutPdf from "@/components/common/outPdf/outPdf";
	import {
		htmlToBlob
	} from "@/api/index";
	import vPDFCover from "@//components/common/OutPdfFM"
	// import {htmlToBlob} from '@/api/index'
	import downloadFile from "@/plugs/downloadFile";
	import FileSaver from "file-saver";
	import htmlDocx from "html-docx-js/dist/html-docx";
	import Isnull from "@/utils/ObjectIsNull.js";
	import {
		indexedDb
	} from "@/utils/IndexedDB.js";
	import {
		softInfo,
		hardInfo,
		tableSpaceUse,
		syslog,
		controlFile,
		Tigger,
		DBhit,
		//   tableSall,
		Parameter,
		BaseEvent,
		Generalsituation,
	} from "@/api/index";


	export default {
		props: {
			dialogVisible: Boolean,
			itemType: String,
			dialogData: Array,
			title: String,
			info: null,
			triggerInfo: null,
		},
		components: {
			vOutPdf,
			vPDFCover
		},
		created() {
			// console.log(dialogData);
			// this.initData()
		},
		mounted() {},

		data() {
			return {
				// dialogDatabaseItem: dialogDatabaseItem,
				// dialogServerItem: dialogServerItem,
				// dialogInternetItem: dialogInternetItem,

				pdfData: "",
				loadings: false,
				serverInfo: [],
				cpuInfo: "",
				osInfo: "",
				fileInfo: "",
				// info:this.info
				dialogInfoData: {
					firstItem: {
						Overview: "",
					},
					thirdItem: {
						Hardware: "",
						Software: "",
						dataBase: "",
						ControlFile: "",
						TableSpace: "",
						InvalidObject: "",
						ALTERLOG: "",
						dataBaseParam: "",
					},
					fourthItem: {
						hitRate: "",
						baseEvent: "",
					},

				},
			};
		},
		methods: {
			dialogClick() {
				this.dialogInfoData = {
					firstItem: {
						Overview: "",
					},
					thirdItem: {
						Hardware: "",
						Software: "",
						dataBase: "",
						ControlFile: "",
						TableSpace: "",
						InvalidObject: "",
						ALTERLOG: "",
						dataBaseParam: "",
					},
					fourthItem: {
						hitRate: "",
						baseEvent: "",
					},
				};
				this.$emit("haldDialogfalse");
			},

			async initData() {
				await softInfo(this.info)
					.then((res) => {
						// console.log(res, '软件配置');
						if (!Isnull(res)) {
							this.dialogInfoData.thirdItem.Software = res;
						} else {
							this.dialogInfoData.thirdItem.Software = false;
						}
					})
					.catch((err) => {
						console.log(err);
					}),
					await hardInfo(this.info)
					.then((res) => {
						// console.log(res, '硬件配置');
						// console.log(res)
						if (!Isnull(res)) {
							this.dialogInfoData.thirdItem.Hardware = res;
						} else {
							this.dialogInfoData.thirdItem.Hardware = false;
						}
					})
					.catch((err) => {
						console.log(err);
					}),
					await tableSpaceUse(this.info)
					.then((res) => {
						// console.log(res, '表空间管理');

						if (!Isnull(res)) {
							this.dialogInfoData.thirdItem.TableSpace = res;
						} else {
							this.dialogInfoData.thirdItem.TableSpace = false;
						}
						// this.dialogInfoData.thirdItem.TableSpace = res;
						// console.log(typeof(this.dialogInfoData.thirdItem.TableSpace))
					})
					.catch((err) => {
						console.log(err);
					}),
					await syslog(this.info)
					.then((res) => {
						// console.log(res, '数据库日志');

						if (!Isnull(res)) {
							this.dialogInfoData.thirdItem.ALTERLOG = res;
						} else {
							this.dialogInfoData.thirdItem.ALTERLOG = false;
						}
					})
					.catch((err) => {
						console.log(err);
					});
				await controlFile(this.info)
					.then((res) => {
						// console.log(res, "控制文件");
						//   this.dialogInfoData.thirdItem.ControlFile = res;
						if (!Isnull(res)) {
							this.dialogInfoData.thirdItem.ControlFile = res;
						} else {
							this.dialogInfoData.thirdItem.ControlFile = false;
						}
					})
					.catch((err) => {
						console.log(err);
					});
				await Tigger({
						ip: this.triggerInfo.ip,
						port: this.triggerInfo.port,
						user: this.triggerInfo.user,
						password: this.triggerInfo.password,
						sid: this.triggerInfo.DbSid,
						time: this.info.time,
						time2: this.info.time2,
					})
					.then((res) => {
						// console.log(res, "无效对象");
						//   this.dialogInfoData.thirdItem.InvalidObject = res;
						if (!Isnull(res)) {
							this.dialogInfoData.thirdItem.InvalidObject = res;
						} else {
							this.dialogInfoData.thirdItem.InvalidObject = false;
						}
					})
					.catch((err) => {
						console.log(err);
					});
				await DBhit({
						ip: this.triggerInfo.ip,
						port: this.triggerInfo.port,
						user: this.triggerInfo.user,
						password: this.triggerInfo.password,
						sid: this.triggerInfo.DbSid,
					})
					.then((res) => {
						// console.log(res, "命中率");
						//   this.dialogInfoData.fourthItem.hitRate = res;
						if (!Isnull(res)) {
							this.dialogInfoData.fourthItem.hitRate = res;
						} else {
							this.dialogInfoData.fourthItem.hitRate = false;
						}
					})
					.catch((err) => {
						console.log(err);
					});
				await Parameter(this.info)
					.then((res) => {
						//数据库参数

						// this.dialogInfoData.thirdItem.dataBaseParam=res;
						if (!Isnull(res)) {
							this.dialogInfoData.thirdItem.dataBaseParam = res;
						} else {
							this.dialogInfoData.thirdItem.dataBaseParam = false;
						}
					})
					.catch((err) => {
						console.log(err);
					});

				await BaseEvent(this.info)
					.then((res) => {
						//.等待事件
						//   this.dialogInfoData.fourthItem.baseEvent = res;
						if (!Isnull(res)) {
							this.dialogInfoData.fourthItem.baseEvent = res;
						} else {
							this.dialogInfoData.fourthItem.baseEvent = false;
						}
					})
					.catch((err) => {
						console.log(err);
					});
				await Generalsituation(this.info)
					.then((res) => {
						//总体概况
						//   this.dialogInfoData.firstItem.Overview = res;
						if (!Isnull(res)) {
							this.dialogInfoData.firstItem.Overview = res;
						} else {
							this.dialogInfoData.firstItem.Overview = false;
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
			// print(){
			// 	this.$PDFSave(this.$refs["content"], "我的文件");
			// },
			// exportPdf(){
			// 	this.pdfData=''
			// },
			//实时获取
			htmlInit() {
				let data = this.$refs.box.innerHTML;
				let Ecmascript =
					`<script>let a =document.querySelectorAll('a');for(let i=0;i<a.length;i++)a[i].href=''<\/script>`;
				let elementHeight = (height) => {
					let num = Math.ceil(height / 1050);
					return num * 1050;
				};
				let itemheight = {
					menu: elementHeight(this.$refs.menu.offsetHeight),
					tip1: elementHeight(this.$refs.tip1.offsetHeight),
					tip2: elementHeight(this.$refs.tip2.offsetHeight),
					tip3: elementHeight(this.$refs.tip3.offsetHeight),
					tip4: elementHeight(this.$refs.tip4.offsetHeight),
				};
				let style = `
    			.menu{height:${itemheight.menu}px} .tip1{height:${itemheight.tip1}px} .tip2 {height:${itemheight.tip2}px} .tip3 {height:${itemheight.tip3}px} .tip4 {height:${itemheight.tip4}px}
    		`;
				return (data =
					`<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><style>a {text-decoration: none;color:#363636;display:block;}${style}</style>${data}</body>${Ecmascript}</html>`
					);
			},
			async initPdfData() {
				// this.loadings = true;

				// htmlToBlob({ html: this.htmlInit() })
				//     .then((res) => {
				//         // console.log(res);
				//         if (res.status === "200") {
				//             this.$message({
				//                 showClose: true,
				//                 message: "导出成功",
				//                 type: "success",
				//             });
				//         }

				//         const buf = Buffer.from(
				//             res.data._streams[1].data,
				//             "binary"
				//         );
				//         // 再输入到 Blob 生成文件

				//         // const blob = new Blob([buf], { type: "application/pdf" });
				//         // const a = document.createElement("a");

				//         // 指定生成的文件名

				//         // a.download = `开发测试文件` + ".pdf";
				//         // a.href = URL.createObjectURL(blob);
				//         // document.body.appendChild(a);
				//         // a.click();
				//         // document.body.removeChild(a);
				// 		downloadFile(buf,`${this.info.ip}数据库运行报告.pdf`)

				//         this.loadings = false;
				//     })
				//     .catch((err) => {
				//         console.log(err);
				//         this.$message({
				//             showClose: true,
				//             message: "导出失败",
				//             type: "error",
				//         });
				//         this.loadings = false;
				//     });



				let data = {
					id: 0,
					html: this.htmlInit()
				};

				indexedDb("HtmlBase", [data], "infoBase", "id");


				let url = this.$router.resolve({
					path: "/pdfDownload",
				});
				window.open(url.href);
			},
			exportWordTpl() {
				let converted = htmlDocx.asBlob(this.htmlInit());
				FileSaver.saveAs(converted, `${this.info.ip}数据库运行报告.docx`);
			},
		},
	};
</script>
<style>
	.dialogBox {
		display: grid;
		grid-template-rows: auto;
		column-gap: 20px;
	}

	a {
		text-decoration: none;
		color: #909399;
	}

	.box-card {
		margin: 10px;
	}

	.a {
		text-indent: 2em;
		font-size: 16px;
		background: #b5b5b5;
		font-weight: 500;
		justify-items: center;
		list-style: none;
		display: inline-block;
	}

	.menu {
		/* display: none; */
	}
</style>
